<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>统一下单接口测试</title>
    <link href="../css/weui.min.css" rel="stylesheet">
    <link href="../css/example.css" rel="stylesheet">
</head>
<body ontouchstart>
    <div class="page__hd">
    <h1 class="page__title">
        下单接口
    </h1>
    <p class="page__desc" id="msg">准备下单...</p>
    <p class="page__desc" id="result"></p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" id="pay" style="display: none" class="weui-btn weui-btn_primary">发起支付</a>
    </div>
    <div class="page__ft"></div>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script>
        // 测试时为了JSAPI可以发起支付，所以在微信接口注入成功后再进行下单，保证能支付，当然你也可以只测试下单功能，就不需要jsapi注入了
        // 首先判断是否是微信浏览器
        var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) ;
        if(!wechatInfo) {
            alert("请在微信浏览器内打开！") ;
        } else if ( wechatInfo[1] < "5.0" ) {
            alert("支付功能仅支持微信5.0以上版本，请更新微信客户端。") ;
        } else {
            // 获取微信jssdk签名
            var openid = getOpenid();
            if(openid != "") {
                $.ajax({
                    url: "/wxpay/index/getJSSDKSign.do",
                    dataType:'json',
                    data: {'url' : location.href},
                    type: "POST",
                    success:function(data){
                        if(data.status == "success") {
                            // 调用jsapi注入权限验证
                            wx.config({
                                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                appId: data.appId, // 必填，公众号的唯一标识
                                timestamp: data.timestamp, // 必填，生成签名的时间戳
                                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                                signature: data.signature,// 必填，签名，见附录1
                                jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                            });
                        } else {
                            alert(data.msg);
                        }
                    },
                    error:function () {
                        alert("error");
                    }
                });
                wx.error(function (res) {
                    alert("微信初始化失败：" + res);
                });
                wx.ready(function(){
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    $("#msg").text("正在下单...");
                    // 调用下单接口进行统一下单
                    $.ajax({
                        url: "/wxpay/unifiedOrder/doUnifiedOrder.do",
                        dataType:'json',
                        data: {openid : getOpenid()},
                        type: "POST",
                        success:function(data){
                            if(data.status == "success") {
                                $("#msg").text("下单完成，请点击支付按钮，进行支付");
                                $("#result").text(JSON.stringify(data));
                                $("#pay").click(function () {
                                    // 若下单成功则绑定发起支付
                                    wx.chooseWXPay({
                                        timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                        nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                                        package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：***）
                                        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                        paySign: data.paySign, // 支付签名
                                        success: function (res) {
                                            // 支付成功后的回调函数
                                            $("#result").text(JSON.stringify(res));
                                            if (res.errMsg == "chooseWXPay:ok") {
                                                // message: "微信支付成功!",
                                                $("#msg").text("支付成功！注意：此处是微信返回的支付成功，应该向服务端请求订单查询，服务器调用查询接口，查看是否真正支付成功，再处理后续业务逻辑！！！");
                                                $("#pay").hide();
                                            }else if (res.errMsg == "chooseWxPay:cancel") {
                                                // message: "已取消微信支付!"
                                                $("#msg").text("已取消微信支付!");
                                            } else {
                                                $("#msg").text("支付成功,但不知道怎么处理！");
                                            }
                                        }
                                    });
                                });
                                $("#pay").show();
                            } else {
                                alert(data.msg);
                            }
                        },
                        error:function () {
                            alert("error");
                        }
                    });
                });
            } else {
                alert("openid为空，不能进行后续操作");
            }
        }

        function getOpenid() {
            var url = location.search; // 获取url中"?"符后的字串
            var openid = "";
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var param = str.split("=");
                openid = param[1];
            }
            return openid;
        }
    </script>
</body>
</html>